import React, { Component } from 'react';
import {connect} from 'react-redux';
import {VoteProps} from '../../../store/reducer/vote.reducer';
import * as votelistAction from '../../../store/actions/votelist';
import {bindActionCreators} from 'redux';
import './index.css';

interface Iprops{
    change:(name:string) => void,
    getVoteList:() => void,
    votelist:VoteProps[],
    selected:(id:number,optionId:number,name:string) => void
}

class Home extends Component<Iprops>{
    componentDidMount(){
        this.props.votelist.length == 0 && this.props.getVoteList()
    }
    render() {
        let name = localStorage.getItem('name') || '';
        return (
            <div className="home">
                {this.props.votelist.map(item => <div key={item.id} className="vote">
                    <dl className="userinfo">
                        <dt>
                            <img src="https://pics5.baidu.com/feed/cefc1e178a82b901c474ea88e20761703b12efc6.png?token=dc9fd7bfa724b0d43f6dfdeb91790b43&s=4385D5048E8922C626353D040300B0E3" alt=""/>
                        </dt>
                        <dd>
                            <h6>{item.createUser}</h6>
                            <p>{item.createTime}</p>
                        </dd>
                    </dl>
                    <h6>{item.title}</h6>
                    <div className="options">
                        <p>{item.desc}</p>
                        <ul>
                            {item.options.map(v => <li onClick={() => this.props.selected(item.id,v.id,name)} className={`item ${item.selected != -1 ? 'selected' : ''}`} key={`${item.id}-${v.id}`}>
                                <div className={`text ${item.selected === v.id ? 'choose' : ''}`}>
                                    <i className="icon">{v.text}</i>
                                    <i style={{display:item.selected != -1 ? 'block' : 'none'}}>{v.num}</i>
                                </div>
                                <div className="bgColor" style={{width:v.num/item.size*100+'%'}}></div>
                            </li>)}
                        </ul>
                    </div> 
                </div>)}
            </div>
        );
    }
}

//state ---->  props

//dispatch --> props

const mapStateToProps = (state:any) => {
    console.log(state);
    return {
        votelist:state.vote.votelist
    }
}

const mapDispatchToProps = (dispatch:any) => {
    return bindActionCreators(votelistAction,dispatch)
    // return {
    //     //设置投票
    //     setVote(){
    //         dispatch(getVoteList())
    //     }
    // }
}


export default connect(mapStateToProps,mapDispatchToProps)(Home);